<template>
	<view class="container">
		<view class="form">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="8">
					<view class="demo-uni-col dark">账户余额</view>
				</uni-col>
				<uni-col :span="16">
					<view class="demo-uni-col light">￥{{this.currentBalance}}</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="form">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="8">
					<view class="demo-uni-col dark">提现金额</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col money"><uni-easyinput v-model="payouts"
							placeholder="请输入提现金额(元)"></uni-easyinput></view>
				</uni-col>
				<uni-col :span="3">
					<view class="demo-uni-col yuan">元</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="form">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="8">
					<view class="demo-uni-col dark">真实姓名</view>
				</uni-col>
				<uni-col :span="16">
					<view class="demo-uni-col money"><uni-easyinput :inputBorder="false" v-model="name"
							placeholder="请输入姓名"></uni-easyinput></view>
				</uni-col>
			</uni-row>
		</view>
		<view class="form">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="8">
					<view class="demo-uni-col dark">请选择银行</view>
				</uni-col>
				<uni-col :span="16">
					<view class="demo-uni-col money"><uni-combox :candidates="candidates"
							placeholder="请选择银行"></uni-combox></view>
				</uni-col>
			</uni-row>
		</view>
		<view class="form">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="24">
					<view class="demo-uni-col dark"><uni-easyinput :maxlength="16" :inputBorder="false"
							v-model="cardNumber" placeholder="请输入银行卡卡号" /></view>
				</uni-col>
			</uni-row>
		</view>
		<view class="info">xxx不会通过任何渠道泄露您的个人信息，请放心填写</view>
		<navigator hover-class="none">
			<button class="button" @click="onsubmit"><text class="button-text">确认信息并提交</text></button>
			<yfx-tooltip ref="tooltip"></yfx-tooltip>
		</navigator>


		<view class="record">
			<view class="title">提现记录</view>
			<view class="flex" v-for="item in withdrawalHistoryList">
				<view class="records">
					<view>商家提现记录</view>
					<view>{{item.time}}</view>
				</view>
				<view class="time">
					<view>-{{item.cashWithdrawal}}</view>
					<view>{{item.status == 0 ? "审核中" : item.status == 1 ? "提现成功" : "提现失败"}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nvueWidth: 730,
				name: '',
				cardNumber: '',
				payouts: '',
				candidates: ['工商银行', '农业银行'],
				merchantId: 1,
				cumulativeIncome: 0,
				cumulativeWithdrawals: 0,
				currentBalance: 0,
				withdrawalHistoryList: [],
			}
		},
		methods: {
			onsubmit(e) {
				// 收集信息  
				const formData = {
					payouts: this.payouts,
					name: this.name,
					cardNumber: this.cardNumber,
					candidates: this.candidates[0] // 假设你有一个绑定的银行变量  
				};
				console.log('提交内容', formData);
				if(this.currentBalance > formData.payouts && formData.payouts != ''){
					this.add(formData)
					this.getBill()
					uni.redirectTo({
						url:"/pages/index/payments/results/results"
					})
				}else {
					uni.redirectTo({
						url:"/pages/index/payments/payouts/payouts"
					})
				}
				this.cancel()
			},
			getBill() {
				uni.request({
					url: "http://localhost:8080/merchant/payouts/getbill",
					method: 'GET',
					header: {
						Authorization: "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImU0YzMwZWQ0LTY0YTQtNGY0Ni05ZTkyLTY4ZjBlNTA3N2Q5ZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.dohQgAACtQJ-v4DyHhUEtX7KyB0XqIFrON7YnaPBRYEvi_0aRjCzbT_w_2cHnGxLa7xz3fWXkx51qNT94qS4iQ"
					},
					data: {
						id: this.merchantId,
						timeRange: null,
					},
					success: (resp) => {
						this.getMoney(resp.data.data)
					}
				})
			},
			getMoney(e) {
				for (let i = 0; i < e.length; i++) {
					if (e[i].name != "提现") {
						this.cumulativeIncome = this.cumulativeIncome + e[i].price
					} else {
						this.cumulativeWithdrawals = this.cumulativeWithdrawals + e[i].price
					}
				}
				this.currentBalance = this.cumulativeIncome - this.cumulativeWithdrawals
			},
			withdrawalHistory() {
				uni.request({
					url: "http://localhost:8080/merchant/payouts/list",
					method: 'GET',
					header: {
						Authorization: "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImU0YzMwZWQ0LTY0YTQtNGY0Ni05ZTkyLTY4ZjBlNTA3N2Q5ZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.dohQgAACtQJ-v4DyHhUEtX7KyB0XqIFrON7YnaPBRYEvi_0aRjCzbT_w_2cHnGxLa7xz3fWXkx51qNT94qS4iQ"
					},
					data: {
						id: this.merchantId,
					},
					success: (resp) => {
						this.withdrawalHistoryList = resp.data.rows
					}
				})
			},
			add(e) {
				console.log(e)
				uni.request({
					url: "http://localhost:8080/merchant/payouts",
					method: 'POST',
					header: {
						Authorization: "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImU0YzMwZWQ0LTY0YTQtNGY0Ni05ZTkyLTY4ZjBlNTA3N2Q5ZCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.dohQgAACtQJ-v4DyHhUEtX7KyB0XqIFrON7YnaPBRYEvi_0aRjCzbT_w_2cHnGxLa7xz3fWXkx51qNT94qS4iQ"
					},
					data: {
						merchantId: this.merchantId,
						cashWithdrawal:e.payouts,
						realName:e.name,
						bankName:e.candidates,
						bankCardNumber:e.cardNumber
					},
					success: (resp) => {
						console.log(resp)
					}
				})
			},
			cancel(){
				this.name = ''
				this.cardNumber = ''
				this.payouts = ''
			}
		},
		onLoad() {
			this.getBill()
			this.withdrawalHistory()
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.form {
		margin: 20rpx;
		border-bottom: 1rpx solid rgba(140, 139, 139, 0.18);
	}

	.button {
		width: 324rpx;
		height: 80rpx;
		border-radius: 22rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}

	.button-text {
		font-size: 28rpx;
	}

	.info {
		width: 660rpx;
		margin: 20rpx;
		padding-top: 20rpx;
		font-size: 24rpx;
		text-align: center;
		color: rgb(140, 139, 139);
	}

	.record {
		margin-top: 40rpx;
	}

	.flex {
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(187, 187, 187, 1);
	}

	.records {
		width: 360rpx;
		height: 120rpx;
	}

	.records>view:nth-child(1) {
		margin: 15rpx;
		font-size: 30rpx;
		color: rgb(16, 16, 16);
		font-weight: bold;
	}

	.time {
		width: 210rpx;
		height: 120rpx;
		margin-left: 140rpx;
		margin-right: 20rpx;
		text-align: right;
	}

	.time>view:nth-child(1) {
		margin: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: rgb(16, 16, 16);
	}

	.title {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: rgba(16, 16, 16, 1);
	}

	.demo-uni-row {
		margin-bottom: 20rpx;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 20rpx;
	}

	/* #endif */

	.demo-uni-col {
		height: 72rpx;
		border-radius: 10rpx;

	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		line-height: 72rpx;
		font-size: 32rpx;
		color: rgba(16, 16, 16, 1);
	}

	.light {
		line-height: 72rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: rgb(247, 5, 5);
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}

	.container {
		width: 720rpx;
		margin: 20rpx;
	}

	.money {
		font-size: 32rpx;
		color: rgba(16, 16, 16, 1);
	}

	.yuan {
		font-size: 32rpx;
		color: rgba(16, 16, 16, 1);
		margin-left: 15rpx;
		font-weight: bold;
		line-height: 72rpx;
	}
</style>